<!DOCTYPE html>
<html>
<head>
    <title>生成整站模板</title>
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .glyphicon-remove-btn{
                color:red;
                cursor: pointer;
            }
            .module-list label{
                padding: 8px 10px;
            }
            .select-main-panel{
                position: relative;
            }
            .display-div{
                position: absolute;
                top: 10px;
                right: 10px;
            }
            .select-main-panel:after{
                content: '';
                height: 0px;
                display: block;
                clear: both;
            }
            .flexible-panel{
                /*display: none;*/
            }
            .display-btn{
                cursor: pointer;
                font-size:18px;
            }
            .display-btn:hover{
                color:orange;
            }
            .shadow{
                width:100%;
                height:100%;
                position:absolute;
                left:0;
                top:0;
                z-index:998;
                background-color:#000;
                opacity:0.6;
                display:none;
            }
            #select-box .select-double{
                float:left;
                width: 46%;
                height: 500px;
                padding: 0.8%;
                margin:0px 5px;
                border: 5px solid #ccc;
            }
            #select-box:after{
                content:".";        
                display:block;        
                height:0;        
                clear:both;        
                visibility:hidden; 
            }
            #dx-select tr td {
                text-align:left;
            }
            .switch-btn{
                cursor:pointer;
            }
        </style>
</head>
<body>
    <div class="wrap js-check-wrap">
        <ul class="nav nav-tabs">
           <?php $currentTab  =  8 ; ?>
           <include file='public/nav'>
        </ul>
		 
			
        <div class="well margin-top-20" style="background-color:white;">
			<div style="border-bottom: 1px solid white;padding: 0px 30px 0px 0px;">
				<button class="btn btn-success" type="button" onclick="createSiteTemplate();"><span class="glyphicon glyphicon-hand-right"></span> 生成模板</button>
			</div>
			<hr/>
            <h4 style="height: 50px;line-height: 50px;"><span class="glyphicon glyphicon-wrench"></span> 配置清单</h4>
            <div class="" style="padding-left: 10px;">
                <h5 id="web-name">网站名称: &nbsp;&nbsp;<input class="form-control"  style=" display: inline-block; width: 500px; font-size: 14px; font-weight: 800 ;" type="text" name="webName" value ="" placeholder="请填写网站名称"></h5>
                <h5 id="web-remarks">域名配置: &nbsp;&nbsp;<input class="form-control"  style=" display: inline-block; width: 500px; font-size: 14px; font-weight: 800 ;" type="text" name="domainName" value ="" placeholder="请填写域名配置"></h5>
				<h5 id="web-remarks">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注: &nbsp;&nbsp;<input class="form-control"  style=" display: inline-block; width: 500px; font-size: 14px; font-weight: 800 ;" type="text" name="remarks" value ="" placeholder="请填写备注信息"></h5>
                <h5>框架列表:</h5>
                <div class="flexible-panel module-list" id="select-framework" >
                    <!-- 框架列表 -->
                    <volist name="frameworkList" id="vo">
                        <label  style="cursor:pointer;" title="{$vo.describe|default='暂无~'}">
                            <input  type="radio" name="framework" id="framework-{$vo.id}"  value="{$vo.id}" data-tag="{$vo.name}">&nbsp;&nbsp;{$vo.name}
                        </label>
                    </volist>
                    <empty name="frameworkList">
                        暂无记录~
                    </empty>
                </div>
				<h5>运行端:</h5>
                <div class="flexible-panel module-list checkbox" id="select-type" style="padding-left:20px;" >
                    <!-- 框架列表 -->
                    <volist name="typeList" id="vo">
                        <label style="cursor:pointer;" title="{$vo.title|default='暂无~'}">
                            <input style="cursor:pointer;" type="checkbox" name="type" id="type-{$vo.id}" value="{$vo.name}" data-tag="{$vo.name}">{$vo.title}&nbsp;&nbsp;
                        </label>
                    </volist>
                    <empty name="typeList">
                        暂无记录~
                    </empty>
                </div>
                <h5>模板列表:</h5>
                <div id="select-box">
                    <div class="select-double">
                        <h4>待选数据</h4>
                       
                        <div style="height:400px;overflow:auto;scroll: auto;">
                            <table id="dx-select" class="table table-bordered table-hover">
                                <volist name="$moduleList" id="vo">
                                <tr class="dx-node-{$vo.id} node-{$vo.name}" data-tag="{$vo.name}">
                                    <td width="30"><span class="switch-btn glyphicon glyphicon-plus"></span></td>
                                    <td>{$vo.title}</td>
									<td></td>
                                </tr>
                                </volist>
                            </table>
							<empty name="$moduleList">
								暂无记录~
							</empty>
                        </div>
                    </div>
                    <div class="select-double">
                        <h4>已选数据</h4>
                        <div>
                            <table class="table table-hover table-bordered" id="is-selected-table" >
								
							</table>
                        </div>
                    </div>
            
        </div>
		
        <div id="module-template-list" >
        </div>
       
        <!-- <div class="well margin-top-20 select-main-panel">
            <div class="display-div"><span class="glyphicon glyphicon-menu-up display-btn" title="收起"></span></div>
            <h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;">商品模块&nbsp;&nbsp;<span style="">商品模块 1.0 模板1</span></h4>
            <div class="flexible-panel">

            </div>
        </div> -->
    </div>

<!--遮罩层-->
<div class="shadow" id="shadow-status-panel" style="relative">
    <div class="show-status" style="width:50%;height:300px; margin: 200px auto 0px auto; background-color: white;z-index: 1000;padding: 20px;overflow-y: scroll;">
        <p id="loading-show">|</p>
    </div>
</div>

<include file='public/scripts'>
<script src="__STATIC__/js/layer/layer.js"></script>
<script src="__STATIC__/js/custom/custom.js"></script>
<script>

    //选择的模板列表
    var selectTemplateList = [];
    //选择框架
    var selectFramework = null ;
	
	// 选择类型
	var selectType = [];
	
	
	//选择框架
    $('#select-framework input[type=radio]').each(function(){
        $(this).change(function(){
            let checked = $(this).prop( 'checked' );
            if( true == checked ){
                let value = $( this ).val();
                selectFramework = value;
            }
        });
    });
	
	//选择类型
	$( '#select-type input[type=checkbox]' ).change(function(){
		selectType = [];
		$('#select-type input[type=checkbox]').each(function(){
			let checked = $(this).prop( 'checked' );
			if( true == checked ){
				let value = $(this).val();
				selectType.push( value );
			}
		});
	});
	
	
	
	
	
    
    //展开关闭按钮事件
    $('.switch-btn').on( 'click' , function(){
		
        let switchStatus = ( $(this).hasClass( 'glyphicon-plus' ) ) ? true : false;
		let thisTr = $(this).parents('tr');
		let name = thisTr.data('tag');
		changeClassStyle( $(thisTr).find('.switch-btn') , switchStatus );
		switchSubElement( thisTr , name , switchStatus );
    });
    
    //开关子级元素
    var switchSubElement = function( thisTr ,  name , isOpen ){
		
        var subEle = $(document).find('.sub-node-'+name);
        if( subEle.length == 0 ){
            $.post('{:cmf_plugin_url("Appmarket://CreateSiteTemplate/getTemplateList")}',{moduleSymbol:name},function(data){
				
                let icon = ( data.code == 200 )? 1:5;
                if( icon != 1 ){
                    layer.msg(data.message , {icon:icon} );
                }else{
                    //填充数据到目录
                    let list = data.data;
                    var tr = '';
                    var versions = '';
                    $.each( list , function( i , v ){
                        if( versions != v.version ){
                            tr += '<tr class="dx-node sub-node-'+name+'" style="background-color:#ccc;">';
                                tr += '<td width="30"><span class="glyphicon glyphicon-option-vertical"></span></td>';
                                tr += '<td style="padding-left:15px;">模块版本:'+v.version+'</td>';
                                tr += '<td></td>';
                            tr += '</tr>';
                            versions = v.version;
                        }
                        tr += '<tr class="dx-node sub-node-'+name+' template-'+v.id+'" data-m="node-'+v.name+'" data-type="'+v.type+'" data-flag="'+v.id+'"  data-tag="'+v.title+'/'+v.version+'/'+v.template_name+'/'+v.type+'">';
                            tr += '<td width="30"><span class=""></span></td>';
                            tr += '<td style="padding-left:50px;cursor:pointer;" onclick="tipsInfo(this);" >'+v.template_name+'&nbsp;&nbsp;'+v.type+'</td>';
                            tr += '<td style="cursor:pointer;text-align:center;"><span style="color:#ccc;font-size:16px;" data-tag="'+v.type+'" class="select-tmplate-btn glyphicon glyphicon-ok-sign"></span></td>';
							tr +='<td style="display:none;">介绍：'+v.introduce+' <br/> 温馨提示:'+v.warning+'</td>'
                        tr += '</tr>';
                    });
					$(thisTr).after(tr);
                }
            },'json');
        }else{
            
				let  flag = '.sub-node-'+name;
				if( isOpen == true ){
					$(document).find(flag).show();
				}else{
					$(document).find(flag).hide();
					
				}
        }
    }
	
	var tipsInfo = function( _this ){
		let title = $(_this).parents('tr').find('td:eq(3)').text();
		layer.tips(title, _this , {
		  tips: [1, '#3595CC'],
		  time: 4000
		});
	}
	
	var changeClassStyle = function( ele , isOpen ){
	
		if( isOpen == true ){
			$(ele).removeClass('glyphicon-plus');
			$(ele).addClass('glyphicon-minus');
		}else{
			$(ele).removeClass('glyphicon-minus');
			$(ele).addClass('glyphicon-plus');
		}
	}
	
	
	//选择模板事件
	$(document).on( 'click' , '.select-tmplate-btn' ,function(){
	
		
		
		let type =$(this).data('tag');
		
		if( -1 == $.inArray( type, selectType ) ){
			layer.msg('未选择'+type+'运行端，请检查！' , { icon : 5 } );
			return false;
		}
		
		let parentNode = $(this).parents('tr').data('m');
		let tp = $(this).parents('tr').data('type');
		let flag = parentNode+'_'+tp;
		if( !$(this).hasClass( 'is-selected' ) && isExistsModule[flag] != undefined  ){
			layer.msg('已选择了该模块下的模板，请检查！' , { icon : 5 } );
			return false;
		}
		
		
		
		$(this).toggleClass('is-selected');
		let isSelected = $(this).hasClass( 'is-selected' );
		
		let tid = $(this).parents('tr').data('flag');
		
		let className = 'template-'+tid;
		let title = $(this).parents('tr').data('tag');
		toggleData( className , title , tid , isSelected );
		
	});
	
	//已选框数据
	var toggleData = function( className , title , tid , isSelected ){
		changeSelectedStyle( className , isSelected );
		if( isSelected == true  ){
			
			//选中
			var tr = '<tr class="select-data is-selected-data-'+className+'"  data-tag="'+className+'" data-tid="'+tid+'">';
					tr += '<td style="text-align:left;">'+title+'</td>';
					tr += '<td style="width:50px; text-align:center;"><span style="color:red;cursor:pointer;" class="select-template-remove-btn glyphicon glyphicon-remove-sign"></span></td>';
				tr += '</tr>';
			$('#is-selected-table').append(tr);
		}else{
			//取消选中
			$('.is-selected-data-'+className).remove();
			
		}
	}	
	
	//取消选择
	$(document).on(  'click' , '.select-template-remove-btn' , function(){
		let className = $(this).parents('tr').data('tag');
		$(this).parents('tr').remove();
		changeSelectedStyle( className  , false );
		$('.'+className).find('.select-tmplate-btn').toggleClass('is-selected');
	} );
	
	//已选择的模块
	var isExistsModule={};
	
	//切换选择样式
	var changeSelectedStyle = function( className , isSelected ){
		let color = ( isSelected == true ) ? 'green' : '#ccc'; 
		let fcolor = ( isSelected == true ) ? 'green' : 'black'; 
		let node = $('.'+className+' .select-tmplate-btn');
		let parentNode = $('.'+className).data('m');
		let type = $('.'+className).data('type')
		let flag = parentNode+'_'+type;
		if( isSelected == true ){
			isExistsModule[flag]=1;
			
		}else{
			delete isExistsModule[flag];
		}
		
		$('.'+parentNode).css( 'color' , fcolor );
		
		
		node.css('color',color);
		node.parents('tr').css('color',fcolor);
		node.parents('tr').find('td:eq(1)').css('color',fcolor);
	}

   

    //提交数据
    var createSiteTemplate = function(){

        let webName = $( '#web-name input[name=webName]' ).val();
        if( $.trim( webName ).length == 0  ){
            layer.msg( '请填写网站名称!' , { icon : 5 } );
            return false;
        }
        let remarks = $( '#web-remarks input[name=remarks]' ).val();
        if( $.trim( remarks ).length == 0 ){
            layer.msg( '请填写备注信息!', {  icon : 5 } ); 
            return false;
        }
		
		let domainName = $( '#web-remarks input[name=domainName]' ).val();
        if( $.trim( domainName ).length == 0 ){
            layer.msg( '请填写域名地址!', {  icon : 5 } ); 
            return false;
        }

        if( selectFramework == null ){
            layer.msg( '请选择前端框架!' , { icon : 5 });
            return false;
        }
		
		if( selectType.length == 0 ){
			layer.msg( '请选择运行端!' , { icon : 5 });
            return false;
		}
		selectTemplateList=[];
		$(document).find('.select-data').each(function(){
			let tid = $(this).data('tid');
			selectTemplateList.push(tid);
		} );
		
		if( selectTemplateList.length == 0 ){
			layer.msg( '请选择需要生成的模板信息!' , { icon : 5 });
            return false;
		}

        //
        $('.shadow').css('height',$('body').height());
        $('.shadow').show();
        loadshow();
        //提交数据
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/createSiteTemplate')}"; 
        $.post( url ,{data : { selectFramework:selectFramework , selectTemplateList :selectTemplateList , webName : webName ,remarks:remarks ,domainName:domainName,selectType:selectType} } ,function(data){
            data = JSON.parse(data);
      
            let icon = ( data.code == 200 ) ? 1 : 5;
            //layer.msg( data.message , { icon : icon } );
            showStatus( data.message , ( data.code == 200 ) );
            if( icon == 1 ){
                //更新
                setTimeout( function(){
                    margeFile( data.data );
                } , 1200 );
            }
        } );
    }

    //执行
    var margeFile = function( recordsId){
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/mergeFile')}";
        $.ajax({
            url:url,
            type:'POST',
            data:{ recordsId : recordsId },
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){
                let icon = ( data.code == 200 ) ? 1 : 5;
                //layer.msg( data.message , { icon : icon }  );
                showStatus( data.message , ( data.code == 200 ) );
                if( icon == 1 ){
                    //执行压缩
                    compression(recordsId);
                }
            },
            complete:function(){
            }
        });
    }

    //压缩
    var compression = function( recordsId ){
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/compression')}";
        $.ajax({
            url:url,
            type:'POST',
            data:{ recordsId : recordsId },
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){
                let icon = ( data.code == 200 ) ? 1 : 5;
                //layer.msg( data.message , { icon : icon }  );
                showStatus( data.message , ( data.code == 200 ) );
                if( icon == 1 ){
                    setTimeout( function(){
                        //跳转到记录列表
                        layer.msg('预设跳转到记录表');
                        window.location.href = data.data;

                    } , 1200 );
                }
            },
            complete:function(){

            }
        });
    }
    //
    var loadingShow = null;
    var loadshow = function(){
        let loadStr = ['|','/','--',"\\"];
        var count = 0;
        loadingShow = setInterval( function(){
            if( count >= loadStr.length  ){
                count = 0;
            }
            $('#loading-show').text('请稍后...'+loadStr[count]);
            count ++ ;
        },200);
    }
    //显示状态
    var showStatus = function( message , status = true ){
        let  color = status ? 'green':'red' ;
        let p = '<p style="color:'+color+';">'+message+'</p>';
        $('#loading-show').before(p);
        if( !status ){
            clearInterval(loadingShow);
			clearShadow();
			layer.msg( message , { icon : 5 , time:5000 }  );
        }
    }
    //清除遮罩层 
    var clearShadow = function(){
        $('.shadow').hide();
        $('.show-status').html('<p id="loading-show">|</p>');
    }
</script>
</body>
</html>
